<template>
  <div id="dymamicTable">
    <vxe-table
      ref="xTable"
      v-loading="tableLoading"
      :data="tableData"
      border
      resizable
      show-overflow
      keep-source
      highlight-hover-row
      :checkbox-config="{ highlight: true}"
      :height="tableHeight"
      show-footer
      :footer-method="footerMethod"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :footer-cell-class-name="footerCellClassName"
      :seq-config="{startIndex: startIndex}"
    >
      <vxe-table-column type="seq" title="序号" width="60" />
      <!--模版  -->
      <template v-for="item in tableHeader">
        <!-- 有多级表头 -->
        <!-- Math.random 用于解决表格之间相互切换所产生的一系列问题 -->
        <table-column
          v-if="item.children && item.children.length>0"
          :key="item.id+''"
          :coloumn-header="item"
          show-overflow-tooltip
        />
        <!-- 一级表头 -->
        <template v-else>
          <vxe-table-column
            :key="item.id+Math.random()+''"
            :field="item.value"
            :title="item.label"
            show-overflow-tooltip
            width="baseWidthVariable"
            :min-width="baseWidthVariable"
          />
        </template>
      </template>
      <vxe-table-column v-if="isShow" fixed="right" :min-width="120" title="操作" field="do">
        <template slot-scope="scope">
          <span style="color:blue;text-decoration:underline;cursor:pointer" @click="editTable(scope.row)">
            修改
          </span>
          <span style="color:red;text-decoration:underline;cursor:pointer;margin-left:10px;display:inline-block" @click="deleteRow(scope.row)">
            删除
          </span>
        </template>
      </vxe-table-column>

      <template #empty>
        <span style="color: red;">
          <img style="height:150px" src="@/assets/images/monthReport/noReport.png">
          <div>暂无报表数据</div>
        </span>
      </template>
    </vxe-table>
  </div>
</template>
<script>
import tableColumn from './TableColumn.vue';
import commonVariable from '@/utils/commonVariable';
import { deleteIncome } from '@/api/IncomeStatement/index.js';
import XEUtils from 'xe-utils';
import { toNumber } from '@/utils/commonMethods';
export default {
  components: {
    tableColumn
  },
  props: {
    // 表格的数据
    tableData: {
      type: Array,
      required: true
    },
    // 多级表头的数据
    tableHeader: {
      type: Array,
      required: true
    },
    // 加载
    tableLoading: {
      type: Boolean,
      default: () => {
        return false;
      }
    }

  },
  data() {
    return {
      baseWidthVariable: commonVariable.baseWidthVariable,
      tableHeight: '',
      startIndex: 0,
      isShow: false
    };
  },

  mounted() {
    this.tableHeight =
      window.innerHeight - this.$refs.xTable.$el.offsetTop - 198;
  },
  methods: {
    // 删除
    deleteRow(row) {
      this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteIncome(row.GUID + '').then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.$parent.getData();
          } else {
            this.$message({
              type: 'warning',
              message: '删除失败!'
            });
          }
        });
      }).catch(() => {

      });
    },
    editTable(row) {
      this.$parent.$refs.enterpriseDialog.title = '修改';
      this.$parent.$refs.enterpriseDialog.dialogVisible = true;
      this.$parent.$refs.enterpriseDialog.filterList[0].value = row.YEAR;
      this.$parent.$refs.enterpriseDialog.filterList[1].value = row.INPUT_DATE;
      this.$parent.$refs.enterpriseDialog.filterList[2].value = row.DISPATCH_DATE;
      this.$parent.$refs.enterpriseDialog.filterList[3].value = row.FILE_NO;
      this.$parent.$refs.enterpriseDialog.filterList[4].value = row.ENTERPRISE;
      this.$parent.$refs.enterpriseDialog.filterList[6].value = row.ITEM;
      this.$parent.$refs.enterpriseDialog.filterList[5].value = row.SUBJECT;
      this.$parent.$refs.enterpriseDialog.filterList[7].value = row.TRANS_PAY_SUBJECT;
      this.$parent.$refs.enterpriseDialog.filterList[8].value = row.PRIOR_TYPE;
      this.$parent.$refs.enterpriseDialog.filterList[9].value = row.TYPE;
      this.$parent.$refs.enterpriseDialog.filterList[10].value = row.RESOURCES;
      this.$parent.$refs.enterpriseDialog.filterList[11].value = row.CALC_BASIS;
      this.$parent.$refs.enterpriseDialog.tableData[0].allYear = toNumber(row.ANNUAL_BALANCE, ',');
      this.$parent.$refs.enterpriseDialog.tableData[0].beginYearBudget = toNumber(row.BEGIN_YEAR_BUDGET, ',');
      this.$parent.$refs.enterpriseDialog.tableData[0].beginYearDeterminedAmount = toNumber(row.BEGIN_YEAR_DETERMINED_AMOUNT, ',');
      this.$parent.$refs.enterpriseDialog.tableData[0].midYearAddAmount = toNumber(row.MID_YEAR_ADD_AMOUNT, ',');
      this.$parent.$refs.enterpriseDialog.guid = row.GUID;
    },
    headerCellStyle({ column, columnIndex }) {
      if (column.property === 'do') {
        return {
          textAlign: 'center',
          backgroundColor: 'rgb(64, 158, 255)',
          color: '#fff',
          borderBottom: '1px solid #fff'
        };
      } else {
        return {
          textAlign: 'center',
          backgroundColor: 'rgb(64, 158, 255)',
          color: '#fff',
          borderBottom: '1px solid #fff'
        };
      }
    },
    footerCellClassName({ $rowIndex, columnIndex }) {
      return 'footer_right';
    },
    cellStyle({ row, rowIndex, column }) {
      if (column.property === 'NATIVENAME') {
        if (row.NATIVENAME === '新增' || row.NATIVENAME === '替换') {
          return {
            textAlign: 'center',
            color: 'red'
          };
        } else {
          return {
            textAlign: 'center'
          };
        }
      } else {
        return {
          textAlign: 'center'
        };
      }
    },

    footerMethod({ columns, data }) {
      const footerData = [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计';
          } else {
            if (columnIndex < 10 || column.property === 'do' || columnIndex > 14) {
              return '--';
            } else {
              const _obj = JSON.stringify(data);
              const copyData = JSON.parse(_obj);
              copyData.map(o => {
                for (const key in o) {
                  if (o[key] + ''.indexOf(',') !== -1) {
                    o[key] = toNumber(o[key] + '', ',');
                  }
                }
              });
              return XEUtils.sum(copyData, column.property);
            }
          }
        })
      ];
      return footerData;
    }
  }
};
</script>
<style scoped lang='scss'>
.spanHover:hover {
  text-decoration: underline;
  cursor: pointer;
}

.dymamicTable_canedit {
  display: grid;
  grid-template-columns: 14px auto;
}
.dymamicTable_canedit__icon {
  opacity: 0;
  margin-right: 10px;
}
.dymamicTable_canedit__icon_show {
  opacity: 1;
}
>>> * {
  .col--dirty {
    color: red;
    &::before {
      display: none;
    }
  }
}

</style>
